<template>
	 <div class="work">
		<div class="flexrow worktop usertop">
			<!-- <span class="usubtit">{{name}}<i class="el-icon-female"></i></span> -->
			<span class="usubtit">{{username}}
				<i class="el-icon-female" v-if="sex==1"></i>
				<i class="el-icon-male" v-if="sex==0"></i>
			</span>
			<span>注册日期：<span>{{create_time}}</span></span>
		</div>
		<div class="workmain">
			<div class="worknum">
				<el-row>
				  <el-col :span="12"><div class="usernum">{{comment_num}}</div></el-col>
				  <el-col :span="12"><div class="usernum">￥{{amount}}</div></el-col>
				</el-row>
				<el-row>
				  <el-col :span="12"><div class="grayfont">评价数</div></el-col>
				  <el-col :span="12"><div class="grayfont">账户余额</div></el-col>
				</el-row>
			</div>
			<div class="vipbox flexrow">
				<div class="flexrow vipimgbox">
					<img src="./img/vip.png" alt="">
					<div>
						<p class="viptitle">已开通会员</p>
						<p class="viptime">还有<span>{{remain_days}}</span>天到期</p>
					</div>					
				</div>
				<div class="vipbtn" @click="linkpay">
					立即续费
				</div>
			</div>
			<div class="usertable">
				<p>充值记录</p>
				<div class="tablebox">
					<!-- <el-table
				      :data="paylist.slice((currentpage-1)*pagesize,currentpage*pagesize)"> -->
				    <el-table :data="paylist">
				      <el-table-column
				        prop="create_time"
				        label="时间"
				        width="160">
				      </el-table-column>
				      <el-table-column
				        prop="order_type_desc"
				        label="充值状态"
				        width="200">
				      </el-table-column>
				      <el-table-column
				        prop="payment_code"
				        label="支付方式"
				        width="200">
				      </el-table-column>
				      <el-table-column
				        prop="amount"
				        label="金额">
				      </el-table-column>
					</el-table>
				</div>
					<div class="userpage">
						<el-pagination
							background
							@current-change="handleCurrentChange"
							:current-page="currentpage"
							:page-size="pagesize"
							:hide-on-single-page="true"
							layout="prev, pager, next"
							:total="total">
						</el-pagination>
					</div>
				</div>
			</div>
				
		</div>
	 </div>
</template>
<script>
import axios from 'axios'
import storage from '../../../storage/index'

  export default {
    name: 'UserWork',
    inject:['reload'],
    data() {
        return {
        	username:localStorage.getItem("username"),
        remain_days:localStorage.getItem("remain_days"),
        	sex:'',
        	create_time:'',
        	comment_num:0,
            amount:0,
        	paylist:[],
        	total:0,
          	currentpage:1,
          	pagesize:4
        }
    },
    computed:{
    	// username(){
    	// 	return this.$store.state.username
    	// },
    	// remain_days(){
	    //     return this.$store.state.remain_days
	    // }  
	    //create_time(){
	  //   	let time = JSON.parse(storage.get('user')).create_time;
	  //   	let date = new Date(time*1000);
	  //   	let Y = date.getFullYear() + '-';
			// let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
			// let D = date.getDate() + ' ';
			// let h = date.getHours() + ':';
			// let m = date.getMinutes() + ':';
			// let s = date.getSeconds(); 
			// return Y+M+D+h+m+s;
			// return JSON.parse(storage.get('user')).create_time 
	  //   },
	   
	},	
    methods:{    			    		    	
        	linkpay(){
        		this.$router.push({name:'UserPay'})
        	},
        	getPayList(a,b){
                axios.post('/recharge/index?limit='+a+'&page='+b,{
                  query:{
                  	limit:a,
                  	page:b
                  }
                }).then((res)=>{
                  res = res.data
                  if (res.status==200) {
                    const data = res.data
                    this.paylist=data.data
                    this.total=data.total
                  }            
                });
	    	},
	    	handleCurrentChange: function(currentpage){
                this.currentpage = currentpage
                this.getPayList(4,currentpage)
        	}
	      },
	     
	created () {
	    this.getPayList(4,1);
	    //解决初次加载拿不到数据
	    window.addEventListener('setItem', ()=> {
	    	
          this.sex = storage.get('sex');
          this.create_time = JSON.parse(storage.get('user')).create_time;
          this.comment_num = JSON.parse(storage.get('user')).comment_num_desc;
	      this.amount = JSON.parse(storage.get('user')).amount_desc;	    
        })   
        this.sex = storage.get('sex');
          this.create_time = JSON.parse(storage.get('user')).create_time;
          this.comment_num = JSON.parse(storage.get('user')).comment_num_desc;
	      this.amount = JSON.parse(storage.get('user')).amount_desc;
	}
	
}
</script>

<style scoped>

	.worktop{
		justify-content: space-between;
		
	}
	.el-icon-female{
		margin-left: 10px;
	}
	.worktop>span:last-child{
		color: #666666;
		font-size: 14px;
	}
	.workmain{
		padding:0 30px;
		text-align: center;
	}
	.worknum{
		padding:30px 0;
	}
	.usernum{
  		font-family: "Gilroy-Regular" !important;
		font-size: 40px;
		color: #0e79ed;
		font-weight: 400;
	}
	.grayfont{
		font-size: 16px;
		color: #757575;
	}
	.vipbox{
		width: 642px;
		height: 50px;
		background: url(./img/bg2.png) no-repeat;
		justify-content: space-between;
		align-items: center;
		padding:30px 50px;
	}
	.vipimgbox{
		align-items: flex-start;
	}
	.vipimgbox p{
		margin:0;
	}
	.vipimgbox>div{
		text-align: left;
	}
	.vipimgbox>img{
		width: 55px;
		height: 45px;
		margin-right: 45px;
	}
	.viptitle{
		font-size: 20px;
		color: #ebc697;
		font-weight: 400;
	}
	.viptime{
		font-size: 18px;
		color: #fff;
	}
	.vipbtn{
		width: 115px;
		height: 35px;
		text-align: center;
		line-height: 35px;
		color:#444444;
		font-size: 14px;
		background:#ebc697; 
		border-radius: 20px;
		cursor: pointer;
	}
	.tablebox{
		height: 250px;
	}
	.usertable{
		background: #fff;
		padding-bottom: 20px;
	}
	.usertable p{
		height: 50px;
		line-height: 50px;
		background:#d7e9fe;
		font-size: 16px;
		color:#0e79ed;
		margin-bottom: 0;
		border-radius: 6px 6px 0 0;
	}
	.usertable .el-table{
		width: 685px;
		margin:0 auto;
	}
	.usertable >>>.el-table .cell{

		text-align: center;
	}
	.usertable >>>.el-table th.is-leaf{
		font-size: 14px;
		color: #a5a5a5;
		font-weight: 300;
		padding-top: 15px;
		border:none;
	}
	.usertable >>>.el-table tbody tr{
		font-size: 14px;
		color: #333;
		font-weight: 300;
		height: 50px;
		line-height: 50px;
	}
	.usertable >>>.el-table tbody{
		height: 514px;
	}
</style>